<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>志尚读书</title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/reading_A12.css"/>
		<script src="../js/auto-size.js"></script>
	</head>
	<body>
		<div class="header"><a href="" class="img"></a>志尚读书</div>
		
		<!--简介-->
		<div class="intro">
			<div class="intro-left">
				<p class="intro-title">简介:</p>
				<p class="intro-text">每月读一本国内外金融类精经典书籍最短的时间， 最易懂的方式读出书中精髓。</p>
			</div>
			<a class="intro-right">开通VIP</a>
		</div>
		
		<!--解读-->
		<div class="reading reading-nth-1">
			<p class="reading-title">准备解读书籍</p>
			<div class="reading-scroll-x"></div>
		</div>
		
		<!--试读-->
		<div class="reading reading-nth-2">
			<p class="reading-title">限时试读</p>
			<div class="reading-scroll-x"></div>
		</div>
		
		<!--已读-->
		<div class="read">
			<p class="reading-title">
				已读书籍
				<select class="year">
				  <option value="volvo">2018年</option>
				  <!--<option value="saab">Saab</option>
				  <option value="opel">Opel</option>
				  <option value="audi">Audi</option>-->
				</select>
				<select class="month">
				  <option value="1">1月</option>
				  <option value="2">2月</option>
				  <option value="3">3月</option>
				  <option value="4">4月</option>
				  <option value="5">5月</option>
				  <option value="6">6月</option>
				  <option value="7">7月</option>
				  <option value="8">8月</option>
				  <option value="9">9月</option>
				  <option value="10">10月</option>
				  <option value="11">11月</option>
				  <option value="12">12月</option>
				</select>
			</p>
			<div class="read-list"></div>
		</div>
		
		<!--现场读书-->
		<div class="the-reading">
			<p class="reading-title">现场读书会</p>
			<div class="the-reading-list"></div>
		</div>
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.lazyload.js"></script>
		<script src="../js/mui.lazyload.img.js"></script>
		<script src="../js/ejs.min.js"></script>
		
		<!--解读和试读摸版-->
		<script type="text/template" id="reading-template">
			<$ for(var i = 0;i < data; i++){$>
				<div class="reading-scroll-x-item">
					<a href="">
						<img src="" data-lazyload="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523357585&di=2fd096e5a291a88ac0c0d877081b5b99&imgtype=jpg&er=1&src=http%3A%2F%2Fpic18.nipic.com%2F20120109%2F5165813_114318211000_2.jpg" class="book-img HUI_Lazy"/>
						<p class="book-info">T+0分时图</p>
					</a>
				</div>
			<$ } $>
		</script>
		
		<!--已读摸版-->
		<script type="text/template" id="readList-template">
			<$ for(var i = 0;i < data; i++){ $>
				<div class="read-book">
					<a href="">
						<img src="" data-lazyload="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523357585&di=2fd096e5a291a88ac0c0d877081b5b99&imgtype=jpg&er=1&src=http%3A%2F%2Fpic18.nipic.com%2F20120109%2F5165813_114318211000_2.jpg" class="read-book-img HUI_Lazy"/>
						<div class="read-book-info">
							<p class="title">T+0分时图</p>
							<p class="text">T+0分时图交易技巧适用于股票、贵金 属、期货、外汇交易等sdgfjdlskjlkhjsafkjsalkfjsdlakfj</p>
							<p class="info"><span class="read-info">已读：第四章</span><span class="time">2017.07.01上新</span></p>
						</div>
					</a>
				</div>
			<$ } $>
		</script>
		
		<!--现场读书摸版-->
		<script type="text/template" id="theReading-template">
			<$ for(var i = 0;i < data; i++){$>
				<div class="the-reading-item">
					<img src="" data-lazyload="../img/60x60.gif" class="the-reading-img HUI_Lazy"/>
					<p class="the-reading-info"><span class="the-reading-title">三月读书会	</span><span class="the-reading-time">2017.01.23</span></p>
					<a href="" class="activity-detail">查看活动详情</a>
				</div>
			<$ } $>
		</script>
		
		<script>
			//渲染解读摸版
			(function(){
				ejs.delimiter = "$";
				let list_template = document.querySelector("#reading-template").innerHTML;
				let data = 20;
				let html = ejs.render(list_template, {data:data});  
		        document.querySelector(".reading-nth-1 .reading-scroll-x").innerHTML = html;  
		        
		        //懒加载
				var lazyLoad = mui(".reading-nth-1 .reading-scroll-x").imageLazyload({
					placeholder: '../img/60x60.gif',
					destroy: false
				});
			})();
			
			//渲染试读摸版
			(function(){
				ejs.delimiter = "$";
				let list_template = document.querySelector("#reading-template").innerHTML;
				let data = 6;
				let html = ejs.render(list_template, {data:data});  
		        document.querySelector(".reading-nth-2 .reading-scroll-x").innerHTML = html;
		        
		        //懒加载
				var lazyLoad = mui(".reading-nth-2 .reading-scroll-x").imageLazyload({
					placeholder: '../img/60x60.gif',
					destroy: false
				});
			})();
			
			//渲染已读摸版
			(function(){
				ejs.delimiter = "$";
				let list_template = document.querySelector("#readList-template").innerHTML;
				let data = 2;
				let html = ejs.render(list_template, {data:data});  
		        document.querySelector(".read-list").innerHTML = html;
		        
		        //懒加载
				var lazyLoad = mui(".read-list").imageLazyload({
					placeholder: '../img/60x60.gif',
					destroy: false
				});
			})();
			
			//渲染现场读书摸版
			(function(){
				ejs.delimiter = "$";
				let list_template = document.querySelector("#theReading-template").innerHTML;
				let data = 20;
				let html = ejs.render(list_template, {data:data});  
		        document.querySelector(".the-reading-list").innerHTML = html;
		        
		        //懒加载
				var lazyLoad = mui(".the-reading").imageLazyload({
					placeholder: '',
					destroy: false
				});
			})();
			
			
			function select(){
				var select_element = document.querySelector(".year");
//				console.log(select_element.options[select_element.selectedIndex].value);
				console.log(select_element.value);		//可以直接这样获取
				
				return select_element.value
			}
			select();
		</script>
	</body>
</html>
